<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>firstpage </title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/firstpage.css">
</head>
<body>
    <div id="head">
        <img src="./images/X.jpg" alt="这是一种图片">
    </div>
    <div id="cnt">
        <div id="c-left">1</div>
        <div id="c-middle">2</div>
        <div id="c-right">3</div>
    </div>
    <div class="search">
            <div class="logo">
                <img src="./images/58logo.png" alt="">
            </div>
            <div class="search-box right clearfix">
                <div class="search-item right clearfix">
                    <button style="width: 150px; margin-left: 20px;">免费发布信息</button>
                </div>
                <div class="search-item right clearfix">
                    <input type="text" placeholder="招聘季月薪10000+">
                    <button>搜索</button>
                </div>
            </div>
    </div>
    <div class="select-list">
        <!-- 58同城页面横向选项列表 -->
            <a href="" style="background-color: #ff552e; color: #ffffff;">首页</a>
            <a href="" class="orange">58APP</a>
            <a href="" class="orange">商家APP</a>
            <a href="" class="orange">58公众号</a>
            <a href="" class="orange">小程序</a>
            <a href="" class="orange nav-special">新车</a>
            <a href="" class="orange nav-special">金融</a>
            <a href="" class="gray">安居客</a>
            <a href="" class="gray">中华英才</a>
            <a href="" class="gray">58同镇</a>
            <a href="" class="gray">同城大学</a>
    </div>
    <div class="main-container">
        <div class="left-side left clearfix">
            <div class="list-items">
                <div class="list clearfix">
                    <li class="item left clearfix">
                        <a href="">
                            <img src="./images/招聘.png" alt="">
                            <p>招聘</p>
                        </a>
                    </li>
                    <li class="item left clearfix">
                        <a href="">
                            <img src="./images/房产.png" alt="">
                            <p>房产</p>
                        </a>
                    </li>
                    <li class="item left clearfix">
                        <a href="">
                            <img src="./images/二手车.png" alt="">
                            <p>二手车</p>
                        </a>
                    </li>
                    <li class="item left clearfix">
                        <a href="">
                            <img src="./images/宠物.png" alt="">
                            <p>宠物</p>
                        </a>
                    </li>
                    <li class="item left clearfix">
                        <a href="">
                            <img src="./images/本地商务.png" alt="">
                            <p>本地商务</p>
                        </a>
                    </li>
                    <li class="item left clearfix">
                        <a href="">
                            <img src="./images/本地服务.png" alt="">
                            <p>本地服务</p>
                        </a>
                    </li>
                </div>
            </div>
            <div class="dg-houses">
                <div class="title special">
                    <a href="">东莞房产</a>
                </div>
                <div class="houses-list">
                    <div class="houses-item">
                        <a href="">租房</a>
                        <a href="">整租</a>
                        <a href="">合租</a>
                        <a href="">民宿短租</a>
                    </div>
                    <div class="houses-item">
                        <a href="">个人房源</a>
                    </div>
                    <div class="houses-item">
                        <a href="">二手房</a>
                        <a href="">安选房源</a>
                        <a href="" class="special">新房</a>
                    </div>
                    <div class="houses-item">
                        <a href="">商铺出租</a>
                        <a href="">商铺出售</a>
                    </div>
                    <div class="houses-item">
                        <a href="">生意转让</a>
                    </div>
                    <div class="houses-item">
                        <a href="">写字楼出租</a>
                        <a href="">写字楼出售</a>
                    </div>
                    <div class="houses-item">
                        <a href="" class="special">办公楼盘</a>
                    </div>
                    <div class="houses-item">
                        <a href="">厂房</a>
                        <a href="">仓库</a>
                        <a href="">土地</a>
                        <a href="">车位</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="right-side right clearfix">
            <div class="service">
                <div class="title">
                    <a href="">
                        <p class="title-item">
                            <span>到家服务</span>
                            <img class="title-item" src="./images/daojia_logo.png" alt="">
                        </p>
                    </a>
                </div>
                <div class="service-items">
                    <li class="item left clearfix">
                        <a href="">
                            <img src="./images/家庭保洁.png" alt="">
                            <p>家庭保洁</p>
                        </a>
                    </li>
                    <li class="item left clearfix">
                        <a href="">
                            <img src="./images/保姆月嫂.png" alt="">
                            <p>保姆月嫂</p>
                        </a>
                    </li>
                    <li class="item left clearfix">
                        <a href="">
                            <img src="./images/拉货搬东西.png" alt="">
                            <p style="width:60px;">拉货搬东西</p>
                        </a>
                        </li>           
                    <li class="item left clearfix">
                        <a href="">
                            <img src="./images/搬家.png" alt="">
                            <p>搬家</p>
                        </a>
                    </li>
                    <li class="item left clearfix">
                        <a href="">
                            <img src="./images/手机维修.png" alt="">
                            <p>手机维修</p>
                        </a>
                    </li>
                </div>
            </div>
        </div>
    </div>
    <!-- 萌主页图标列表 -->
    <div class="moe">
            <a href="">
                <div class="moe-item">
                    <img src="./images/AcFun.jpg" alt="AcFun">
                    <p class="title">AcFun</p>
                </div>
            </a>
            <a href="">
                <div class="moe-item">
                    <img src="./images/M站.png" alt="M站">
                    <p class="title">M站</p>
                </div>
            </a>
            <a href="">
                <div class="moe-item">
                    <img src="./images/腾讯动漫.jpg" alt="腾讯动漫">
                    <p class="title">腾讯动漫</p>
                </div>
            </a>
            <a href="">
                <div class="moe-item">
                    <img src="./images/网易漫画.jpg" alt="网易漫画">
                    <p class="title">网易漫画</p>
                </div>
            </a>
            <a href="">
                <div class="moe-item">
                    <img src="./images/布卡漫画.jpg" alt="布卡漫画">
                    <p class="title">布卡漫画</p>
                </div>
            </a>
            <a href="">
                <div class="moe-item">
                    <img src="./images/qq音乐.png" alt="QQ音乐">
                    <p class="title">QQ音乐</p>
                </div>
            </a>
            <a href="">
                <div class="moe-item">
                    <img src="./images/bilibili.jpg" alt="哔哩哔哩">
                    <p class="title">哔哩哔哩</p>
                </div>
            </a>
            <a href="">
                <div class="moe-item">
                    <img src="./images/网易音乐.jpg" alt="网易音乐">
                    <p class="title">网易音乐</p>
                </div>
            </a>
            <a href="">
                <div class="moe-item">
                    <img src="./images/huya.jpg" alt="虎牙直播">
                    <p class="title">虎牙直播</p>
                </div>
            </a>
            <a href="">
                <div class="moe-item">
                    <img src="./images/aiqiyi.jpg" alt="爱奇艺">
                    <p class="title">爱奇艺</p>
                </div>
            </a>
            <a href="">
                <div class="moe-item">
                    <img src="./images/微信.jpg" alt="微信">
                    <p class="title">微信</p>
                </div>
            </a>
            <a href="">
                <div class="moe-item">
                    <img src="./images/腾讯视频.jpg" alt="腾讯视频">
                    <p class="title">腾讯视频</p>
                </div>
            </a>
            <a href="">
                <div class="moe-item">
                    <img src="./images/baidu.jpg" alt="百度">
                    <p class="title">百度</p>
                </div>
            </a>
    </div>
    <!-- 萌主页的框 -->
    <div class="moe-container">
        <div class="left-side left clearfix">
            <a href="">
                <img src="./images/left-area.png" alt="left-area">
                <div class="mask">【咬人猫X咬人喵】Lamb.我的姐姐终于藏不住了！</div>
            </a>
            <div class="turn-item turn-left">
                <a href="">
                    &lt;
                </a>
            </div>
            <div class="turn-item turn-right">
                <a href="">
                    &gt;
                </a>
            </div>
            <div class="left-list">
                <div class="left-list-items">
                    <div class="left-list-item"></div>
                    <div class="left-list-item"></div>
                    <div class="left-list-item"></div>
                    <div class="left-list-item focus"></div>
                    <div class="left-list-item"></div>
                </div>
            </div>
        </div>
        <div class="center-area">
            <div class="top-area">
                <a class="left clearfix" href="">
                    <div class="top-area-image">
                        <img src="./images/center-area1.png" alt="魔鬼吗！这也太像了~">
                        <p>魔鬼吗！这也太像了~</p>
                    </div>
                </a>
                <a class="right clearfix" href="">
                    <div class="top-area-image">
                        <img src="./images/center-area2.png" alt="大哥别杀我，我请你喝冰阔落">
                        <p>大哥别杀我，我请你喝冰阔落</p>
                    </div>
                </a>
            </div>
            <div class="center-main">
                <li class="center-main-item" href="">
                    <span class="category">[漫画]</span>
                    <a class="right clearfix" href="">ORICON公信榜漫画销量公开 鬼灭之刃超海贼王成冠军</a>
                </li>
                <li class="center-main-item" href="">
                    <span class="category">[动画]</span>
                    <a class="right clearfix" href="">麦当劳将为新品推出宣传动画 前田敦子等温情献声</a>
                </li>
                <li class="center-main-item" href="">
                    <span class="category">[周边]</span>
                    <a class="right clearfix" href="">《机动战士高达》推出主题井盖 大河原邦男监制</a>
                </li>
                <li class="center-main-item" href="">
                    <span class="category">[P图]</span>
                    <a class="right clearfix" href="">当动漫人物遇上P图大神，蓝忘机变正太，太乙真人练出八块腹肌？</a>
                </li>
                <li class="center-main-item" href="">
                    <span class="category">[动漫]</span>
                    <a class="right clearfix" href="">灌篮高手湘北五虎听过的扎心话，赤木遮羞布被揭开，樱木承认输了</a>
                </li>
                <li class="center-main-item" href="">
                    <span class="category">[漫展]</span>
                    <a class="right clearfix" href="">看漫展点这里喵，持续更新中~~~</a>
                </li>
            </div>
        </div>
        <div class="right-side right clearfix">
            <div class="hot-time">
                <button>热门动画榜</button>
                <button class="focus">新番时间表</button>
            </div>
            <div class="day">
                <div class="day-item">日</div>
                <div class="day-item">一</div>
                <div class="day-item">二</div>
                <div class="day-item">三</div>
                <div class="day-item">四</div>
                <div class="day-item">五</div>
                <div class="day-item focus">六</div>
            </div>
            <div class="hot-list">
                <li class="hot-list-item">
                    <a href="">来自多彩世界的明天</a>
                    <button>13话</button>
                </li>
                <li class="hot-list-item">
                    <a href="">逆转裁判 第二季</a>
                    <button>20话</button>
                </li>
                <li class="hot-list-item">
                    <a href="">暖暖日记 3rd</a>
                    <button>53话</button>
                </li>
                <li class="hot-list-item">
                    <a href="">JOJO的奇妙冒险 黄金之风</a>
                    <button>42话</button>
                </li>
                <li class="hot-list-item">
                    <a href="">寄宿学校的朱丽叶</a>
                    <button>69话</button>
                </li>
                <li class="hot-list-item">
                    <a href="">名侦探柯南</a>
                    <button>103话</button>
                </li>
                <li class="hot-list-item">
                    <a href="">刀剑神域 爱丽丝篇 异界战争之-终篇之战-</a>
                    <button>5话</button>
                </li>
            </div>
        </div>
    </div>
    <!-- 携程航班表 -->
    <div class="xiecheng-liner">
        <a href="">
            <div class="liner-item">
                <p class="item-name">上海 &lt;---&gt; 台北</p>
                <p class="item-date">9月03日 - 9月10日</p>
                <div class="item-info clearfix">
                    <div class="item price left clearfix">
                        ￥ <span style="font-size: 22px; color: rgb(255,102,0); vertical-align: text-top;">440</span> 起
                    </div>
                    <div class="item button right clearfix">
                        <button>立抢</button>
                    </div>
                </div>
            </div>
        </a>
        <a href="">
            <div class="liner-item">
                <p class="item-name">上海 &lt;---&gt; 香港</p>
                <p class="item-date">9月02日 - 9月09日</p>
                <div class="item-info clearfix">
                    <div class="item price left clearfix">
                        ￥ <span style="font-size: 22px; color: rgb(255,102,0); vertical-align: text-top;">590</span> 起
                    </div>
                    <div class="item button right clearfix">
                        <button>立抢</button>
                    </div>
                </div>
            </div>
        </a>
        <a href="">
            <div class="liner-item">
                <p class="item-name">上海 &lt;---&gt; 台北</p>
                <p class="item-date">9月03日 - 9月10日</p>
                <div class="item-info clearfix">
                    <div class="item price left clearfix">
                        ￥ <span style="font-size: 22px; color: rgb(255,102,0); vertical-align: text-top;">440</span> 起
                    </div>
                    <div class="item button right clearfix">
                        <button>立抢</button>
                    </div>
                </div>
            </div>
        </a>
        <a href="">
            <div class="liner-item">
                <p class="item-name">上海 &lt;---&gt; 香港</p>
                <p class="item-date">9月05日 - 9月12日</p>
                <div class="item-info clearfix">
                    <div class="item price left clearfix">
                        ￥ <span style="font-size: 22px; color: rgb(255,102,0); vertical-align: text-top;">690</span> 起
                    </div>
                    <div class="item button right clearfix">
                        <button>立抢</button>
                    </div>
                </div>
            </div>
        </a>
        <a href="">
            <div class="liner-item">
                <p class="item-name">上海 &lt;---&gt; 曼谷</p>
                <p class="item-date">9月01日 - 9月08日</p>
                <div class="item-info clearfix">
                    <div class="item price left clearfix">
                        ￥ <span style="font-size: 22px; color: rgb(255,102,0); vertical-align: text-top;">1700</span> 起
                    </div>
                    <div class="item button right clearfix">
                        <button>立抢</button>
                    </div>
                </div>
            </div>
        </a>
        <a href="">
            <div class="liner-item">
                <p class="item-name">上海 &lt;---&gt; 澳门</p>
                <p class="item-date">9月02日 - 9月09日</p>
                <div class="item-info clearfix">
                    <div class="item price left clearfix">
                        ￥ <span style="font-size: 22px; color: rgb(255,102,0); vertical-align: text-top;">2013</span> 起
                    </div>
                    <div class="item button right clearfix">
                        <button>立抢</button>
                    </div>
                </div>
            </div>
        </a>
        <a href="">
            <div class="liner-item">
                <p class="item-name">上海 &lt;---&gt; 新加坡</p>
                <p class="item-date">9月03日 - 9月10日</p>
                <div class="item-info clearfix">
                    <div class="item price left clearfix">
                        ￥ <span style="font-size: 22px; color: rgb(255,102,0); vertical-align: text-top;">9300</span> 起
                    </div>
                    <div class="item button right clearfix">
                        <button>立抢</button>
                    </div>
                </div>
            </div>
        </a>
        <a href="">
            <div class="liner-item">
                <p class="item-name">上海 &lt;---&gt; 洛杉矶</p>
                <p class="item-date">9月01日 - 9月08日</p>
                <div class="item-info clearfix">
                    <div class="item price left clearfix">
                        ￥ <span style="font-size: 22px; color: rgb(255,102,0); vertical-align: text-top;">30900</span> 起
                    </div>
                    <div class="item button right clearfix">
                        <button>立抢</button>
                    </div>
                </div>
            </div>
        </a>
        <a href="">
            <div class="liner-item">
                <p class="item-name">上海 &lt;---&gt; 巴黎</p>
                <p class="item-date">9月05日 - 9月12日</p>
                <div class="item-info clearfix">
                    <div class="item price left clearfix">
                        ￥ <span style="font-size: 22px; color: rgb(255,102,0); vertical-align: text-top;">33750</span> 起
                    </div>
                    <div class="item button right clearfix">
                        <button>立抢</button>
                    </div>
                </div>
            </div>
        </a>
        <a href="">
            <div class="liner-item">
                <p class="item-name">上海 &lt;---&gt; 伦敦</p>
                <p class="item-date">9月05日 - 9月12日</p>
                <div class="item-info clearfix">
                    <div class="item price left clearfix">
                        ￥ <span style="font-size: 22px; color: rgb(255,102,0); vertical-align: text-top;">33750</span> 起
                    </div>
                    <div class="item button right clearfix">
                        <button>立抢</button>
                    </div>
                </div>
            </div>
        </a>
        <a href="">
            <div class="liner-item">
                <p class="item-name">上海 &lt;---&gt; 纽约</p>
                <p class="item-date">9月01日 - 9月08日</p>
                <div class="item-info clearfix">
                    <div class="item price left clearfix">
                        ￥ <span style="font-size: 22px; color: rgb(255,102,0); vertical-align: text-top;">35270</span> 起
                    </div>
                    <div class="item button right clearfix">
                        <button>立抢</button>
                    </div>
                </div>
            </div>
        </a>
        <a href="">
            <div class="liner-item">
                <p class="item-name">上海 &lt;---&gt; 法兰克福</p>
                <p class="item-date">9月04日 - 9月11日</p>
                <div class="item-info clearfix">
                    <div class="item price left clearfix">
                        ￥ <span style="font-size: 22px; color: rgb(255,102,0); vertical-align: text-top;">35320</span> 起
                    </div>
                    <div class="item button right clearfix">
                        <button>立抢</button>
                    </div>
                </div>
            </div>
        </a>
        <a href="">
            <div class="liner-item">
                <p class="item-name">上海 &lt;---&gt; 纽约</p>
                <p class="item-date">9月05日 - 9月12日</p>
                <div class="item-info clearfix">
                    <div class="item price left clearfix">
                        ￥ <span style="font-size: 22px; color: rgb(255,102,0); vertical-align: text-top;">35510</span> 起
                    </div>
                    <div class="item button right clearfix">
                        <button>立抢</button>
                    </div>
                </div>
            </div>
        </a>
    </div>
    <!-- 萌主页今日话题下来框 -->
    <div class="moe-scroll">
        <div class="left clearfix">
            <div class="moe-aside">
                <div class="moe-item">
                    <a href="">
                        <img class="moe-item-info" src="./images/moe1.jpg" alt="妖神记 重生泡校花">
                        <p class="moe-item-info">
                            第<span class="number">202</span>话 
                            <span class="go-read">进入阅读>></span>
                        </p>
                    </a>
                    <a class=" moe-item-info" href="">
                        <p class="moe-item-desciption">妖神记 重生泡校花</p>
                    </a>
                </div>
                <div class="moe-item">
                    <a href="">
                        <img class="moe-item-info" src="./images/moe2.jpg" alt="斗破苍穹 属于斗气的世界">
                        <p class="moe-item-info">
                            第<span class="number">198</span>话 
                            <span class="go-read">进入阅读>></span>
                        </p>
                    </a>
                    <a class=" moe-item-info" href="">
                        <p class="moe-item-desciption">斗破苍穹 属于斗气的世界</p>
                    </a>
                </div>
                <div class="moe-item">
                    <a href="">
                        <img class="moe-item-info" src="./images/moe3.jpg" alt="狐妖小红娘 千载孽缘一线牵">
                        <p class="moe-item-info">
                            第<span class="number">225</span>话 
                            <span class="go-read">进入阅读>></span>
                        </p>
                    </a>
                    <a class=" moe-item-info" href="">
                        <p class="moe-item-desciption">狐妖小红娘 千载孽缘一线牵</p>
                    </a>
                </div>
                <div class="moe-item">
                    <a href="">
                        <img class="moe-item-info" src="./images/moe4.jpg" alt="在魔王城说晚安 城堡中的故事 ">
                        <p class="moe-item-info">
                            第<span class="number">45</span>话 
                            <span class="go-read">进入阅读>></span>
                        </p>
                    </a>
                    <a class=" moe-item-info" href="">
                        <p class="moe-item-desciption">在魔王城说晚安 城堡中的故事 </p>
                    </a>
                </div>
                <div class="moe-item">
                    <a href="">
                        <img class="moe-item-info" src="./images/moe5.jpg" alt="一拳超人 一拳干掉一切">
                        <p class="moe-item-info">
                            第<span class="number">123</span>话 
                            <span class="go-read">进入阅读>></span>
                        </p>
                    </a>
                    <a class=" moe-item-info" href="">
                        <p class="moe-item-desciption">一拳超人 一拳干掉一切</p>
                    </a>
                </div>
                <div class="moe-item">
                    <a href="">
                        <img class="moe-item-info" src="./images/moe6.jpg" alt="母性萝莉 大人撒娇也没关系">
                        <p class="moe-item-info">
                            第<span class="number">4</span>话 
                            <span class="go-read">进入阅读>></span>
                        </p>
                    </a>
                    <a class=" moe-item-info" href="">
                        <p class="moe-item-desciption">母性萝莉 大人撒娇也没关系</p>
                    </a>
                </div>
                <div class="moe-item">
                    <a href="">
                        <img class="moe-item-info" src="./images/moe7.jpg" alt="妖怪名单 仙家女神若即离">
                        <p class="moe-item-info">
                            第<span class="number">337</span>话 
                            <span class="go-read">进入阅读>></span>
                        </p>
                    </a>
                    <a class=" moe-item-info" href="">
                        <p class="moe-item-desciption">妖怪名单 仙家女神若即离</p>
                    </a>
                </div>
                <div class="moe-item">
                    <a href="">
                        <img class="moe-item-info" src="./images/moe8.jpg" alt="铁姬钢兵 统领后宫三千机娘">
                        <p class="moe-item-info">
                            第<span class="number">108</span>话 
                            <span class="go-read">进入阅读>></span>
                        </p>
                    </a>
                    <a class=" moe-item-info" href="">
                        <p class="moe-item-desciption">铁姬钢兵 统领后宫三千机娘</p>
                    </a>
                </div>
                <div class="moe-item">
                    <a href="">
                        <img class="moe-item-info" src="./images/moe9.jpg" alt="桃花宝典 宝典在手校花我有">
                        <p class="moe-item-info">
                            第<span class="number">21</span>话 
                            <span class="go-read">进入阅读>></span>
                        </p>
                    </a>
                    <a class=" moe-item-info" href="">
                        <p class="moe-item-desciption">桃花宝典 宝典在手校花我有</p>
                    </a>
                </div>
            </div>
        </div>
        <div class="right clearfix">
            <div class="today-topic">
                <div class="top">
                    <h1>今日话题：</h1>
                    <a href=""><p>和一个喜欢动漫的女孩，聊什么话题？</p></a>
                </div>
                <div class="center">
                    <div class="chat-box">
                        <li class="chat-box-item">
                            <img class="left clearfix photo" src="./images/bilibili.jpg" alt="">
                            <div class="right clearfix message">
                                <p>
                                    <a class="left clearfix" href="">哔哩哔哩<span>：</span></a>
                                    <span class="time right clearfix">2020-08-31</span>
                                </p>
                                <p class="mess-detail">城北以北不再美、城南以南不再蓝。</p>
                            </div>
                        </li>
                        <li class="chat-box-item">
                            <img class="left clearfix photo" src="./images/qq音乐.png" alt="">
                            <div class="right clearfix message">
                                <p>
                                    <a class="left clearfix" href="">QQ音乐<span>：</span></a>
                                    <span class="time right clearfix">2020-08-31</span>
                                </p>
                                <p class="mess-detail">引擎千万个，主页第一个，内容不更新，用户两行泪。</p>
                            </div>
                        </li>
                        <li class="chat-box-item">
                            <img class="left clearfix photo" src="./images/AcFun.jpg" alt="">
                            <div class="right clearfix message">
                                <p>
                                    <a class="left clearfix" href="">AcFun<span>：</span></a>
                                    <span class="time right clearfix">2020-08-31</span>
                                </p>
                                <p class="mess-detail">我欲乘风破浪、踏遍黄沙海洋. 与其误会一场、也要不负勇往.</p>
                            </div>
                        </li>
                        <li class="chat-box-item">
                            <img class="left clearfix photo" src="./images/M站.png" alt="">
                            <div class="right clearfix message">
                                <p>
                                    <a class="left clearfix" href="">M站<span>：</span></a>
                                    <span class="time right clearfix">2020-08-31</span>
                                </p>
                                <p class="mess-detail">我那么多遗憾那么多期盼你知道吗？</p>
                            </div>
                        </li>
                        <li class="chat-box-item">
                            <img class="left clearfix photo" src="./images/网易音乐.jpg" alt="">
                            <div class="right clearfix message">
                                <p>
                                    <a class="left clearfix" href="">网易音乐<span>：</span></a>
                                    <span class="time right clearfix">2020-08-31</span>
                                </p>
                                <p class="mess-detail">爱与恨的接近、梦和现实的分明，我终于睁开眼睛！</p>
                            </div>
                        </li>
                    </div>
                    <div class="more">
                        <a href="">查看更多</a>
                    </div>
                    <div class="input-area">
                        <div class="user">
                            <a href="">CrazyChen</a>
                            <a href="">退出</a>
                        </div>
                        <div class="input-box">
                            <textarea name="tucao" cols="35" rows="4" placeholder="一起来吐槽的什么，盖点楼吧！"></textarea>
                        </div>
                    </div>
                    <div class=" button-area">
                        <div class="right clearfix button-area-item">
                            <img class="left clearfix" src="./images/huaji.jpg" alt="">
                            <button class="right clearfix">有槽要吐</button>
                        </div>
                    </div>
                </div>
                <div class="bottom">
                    <p>一起吐槽吧！已有<span class="number">3601</span>个吐槽</p>
                </div>
            </div>
        </div>
    </div>
    <!-- 企业服务列表 -->
    <div class="qiyefuwu">
        <div class="left-side left clearfix">
            <ul class="catelist">
                <li>
                    <a href="">除四害消杀项目</a>
                </li>
                <li>
                    <a href="">新居开荒保洁</a>
                </li>
                <li>
                    <a href="">管道疏通及清淤</a>
                </li>
                <li>
                    <a href="">清理化粪池</a>
                </li>
                <li>
                    <a href="">箱渠方涵清淤</a>
                </li>
                <li>
                    <a href="">长年承包管网维护保养</a>
                </li>
            </ul>
        </div>
        <div class="right-side right clearfix">
            <ul class="rightlist clearfix">
                <li>
                    <a class="left clearfix" href="">公厕堵塞疏通难格格出面来解决
                    <span class="right clearfix">2015-08-07</span>
                    </a>
                </li>
                <li>
                    <a class="left clearfix" href="">下水道已疏通 公交车仍难等
                    <span class="right clearfix">2015-08-07</span>
                    </a>
                </li>
                <li>
                    <a class="left clearfix" href="">市排水公司义务疏通一沿街跑冒污水管网
                    <span class="right clearfix">2015-08-07</span>
                    </a>
                </li>
                <li>
                    <a class="left clearfix" href="">住户：管道被堵塞 物业：会派人疏通
                    <span class="right clearfix">2015-08-07</span>
                    </a>
                </li>
                <li>
                    <a class="left clearfix" href="">玉带新村松商4号楼前下水道堵塞数月急盼疏通
                    <span class="right clearfix">2015-08-07</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 携程侧边弹出按钮 -->
    <div class="float-view">
        <div class="float-container">
            <div class="float-item banner">
                <img src="./images/pc_activity_banner.png" alt="">
            </div>
            <div class="float-item qrcode">
                <p>扫描二维码下载</p>
                <img src="./images/pc_activity_qcode.png" alt="">
            </div>
            <div class="float-item btn" onclick="closedown();">x</p>
        </div>
        <div class="logoo">
            <img src="./images/fl_open_wrap.png" alt="" onclick="showup();">
        </div>
    </div>
</body>
</html>
<script src="./js/jquery-3.4.1.js"></script>
<script>
    function closedown(){
        $(".float-view").animate({left:"-100%"},1000,function(){
            $(".logoo").css("display","block");
        })
    }
    function showup(){
        $(".float-view").animate({left:"-102%"},50);
        $(".float-view").animate({left:"0px"},1000);
        $(".logoo").css("display","none");
    }
</script>